<template>
	<div class="switches">
		<ul class="tab">
			<li
				v-for="(item, index) in switches"
				:key="item"
				@click.stop="selectItem(index)"
				:class="{ active: index === currentIndex }"
			>
				{{ item }}
			</li>
		</ul>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class Switches extends Vue {
	@Prop({ default: () => [] })
	switches!: string[];
	@Prop({ default: 0 })
	currentIndex!: number;

	selectItem(index: number) {
		this.$emit("select", index);
	}
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl';

.switches
  .tab
    display flex
    padding 0 60px
    li
      flex 1
      border 1px solid $text-color-l
      line-height 2
      cursor pointer
      &.active
        background-color $background-color-l
</style>
